var BlockSlider = new Class({

	Implements: [Events, Options],
	
	options: {
		onChangeStart: function (liHide, liShow, oSrc){console.log("change", arguments);},
		onChangeComplete: function (liHide, liShow, oSrc){console.log("change", arguments);},
		onMaxRight: function (oSrc){},
		onMaxLeft: function (oSrc){},
		onMaxTop: function (oSrc){},
		onMaxBottom: function (oSrc){},
		pagination: true,
		paginationPosition: "top",
		paginationLabel: "Vignette #"
		
	},
	
	initialize: function (block, options){
		this.setOptions(options);
		this.block = $(block);
		this.el = this.block.getElement("ul");
		
		// vars
		this.width = this.el.offsetWidth - this.el.getHStyle();
		this.height = this.el.offsetHeight - this.el.getVStyle();
		this.currentIndex = 0;
		this.lastCurrentIndex = 0;
		this.futurLeft  = 0;
		
		// avoid focus on inner element
		this.el.getElements(":focusable").set("tabindex", "-1");
		// grab li
		this.lis = this.el.getElements("li.cell");
		// create div as mask around the el
		this.ctn = 
			new Element("div", {"tabindex": "0"})
				.setStyles({"width": this.width, "overflow":"hidden"})
				.aria(
					{
						"role":"scrollbar",
						"orientation": "horizontal",
						"valuemin": 0,
						"valuemax": this.lis.length,
						"valuenow": 0,
						"describedby": "BlockSlider_help"
					}
				)
				.set("scrollLeft", "0");
		this.ctn.inject(this.block, "top");
		this.el.inject(this.ctn);
		this.ctn.addEvent("mousewheel", function (e){
			e.stop();
			this.move(e.wheel);
			
		}.bind(this))
		this.ctn.addEvent("click", function (e){
			e.target.focus();
		}.bind(this));
		this.block.addEvent("keydown", function (e){
			if(e.key == "left") {e.stop();this.move(-1);}
			else if(e.key == "right") {e.stop();this.move(1)}
		}.bind(this));
		
		// injects btns
		this.prev = new Element("span", {tabindex:0, "class": "sliderPrev inactive"}).inject(this.ctn, "top");
		// click
		this.prev.addEvent("click", function (e){
			e.stop();
			this.move(-1)
		}.bind(this))
		// enter
		this.prev.addEvent("keydown", function (e){
			if(e.key == "enter") {
				e.stop();
				this.move(-1)
			}
		}.bind(this));
		
		
		this.next = new Element("span", {tabindex:0, "class": "sliderNext"}).inject(this.ctn, "bottom");
		// click
		this.next.addEvent("click", function (e){
			e.stop();
			this.move(1)
		}.bind(this))
		this.next.addEvent("keydown", function (e){
			if(e.key == "enter") {
				e.stop();
				this.move(1)
			}
		}.bind(this));;
		// set
		this.el.setStyle("width", this.width * this.lis.length)
		this.lis.setStyle("width", this.width);
		
		
		// pagination
		if(this.options.pagination){
			
			this.paginCtn = new Element('div', {'class':'sliderPagination'});
			for(var i=0,l=this.lis.length;i<l;i++){
				new Element('span', {'class':'paginBtn paginBtn_'+i, 'tabindex':0,'text':this.options.paginationLabel+(i+1)})
					.addEvent('click', 
						function (index){
							return function (e){
								e.stop();
								this.moveTo(index);
							}.bind(this)
						
						}.bind(this)(i)
					)
					.addEvent('keydown', 
						function (index){
							return function (e){
								if(e.key == "enter"){
									e.stop();
									this.moveTo(index);
								}
							}.bind(this)
						
						}.bind(this)(i)
					)
					.inject(this.paginCtn);
			}
			this.paginCtn.inject(this.block, this.options.paginationPosition);
		}
		this._check();
		Moodulz.fireEvent("onLayoutChanged", this.ctn);
	},
	
	move : function (direction){
		this.moveTo(this.currentIndex + direction);
	},
	
	moveTo: function (index){
		
		this.futurLeft  = this.width * index;
		this._animate(this.futurLeft, 0);
	},
	
	_animate: function (left, top){
		if(this.anim) this.anim.cancel();
		
		this.anim = 
			new Fx.Scroll(
				this.ctn,  {
					onStart: 
						function (){
							this.fireEvent("onChangeStart", [this.lis[this.currentIndex],this.lis[(left / this.width).toInt()], this]);
						}.bind(this),
					onComplete: 
						function (){
							this.fireEvent("onChangeComplete", [this.lis[this.currentIndex],this.lis[(left / this.width).toInt()], this]);
							this._check();
						}.bind(this) 
				}
			).start(left, top);
		
	},
	
	_check: function (){
		this.prev.removeClass("inactive");
		this.next.removeClass("inactive");
		
		if(this.currentIndex >= this.lis.length){
			this.currentIndex = this.lis.length -1;
			this.next.addClass("inactive");
		}
		else if(this.currentIndex <= 0){
			this.currentIndex = 0;
			this.prev.addClass("inactive");
		}
		this.currentIndex = (this.futurLeft / this.width).toInt();
		this.lis[this.lastCurrentIndex].getElements(":focusable").set("tabindex", "-1");
		this.lis[this.currentIndex].getElements(":focusable").set("tabindex", "0");
	}
});

//Module.register("BlockSlider", "ul.blockSlider");

new Moodule(
	"div.blockSlider", 
	
	BlockSlider,
	
	{
		bDefer : false,
		aArgs: [], 
		fTest: $lambda(true),
		classId: "BlockSlider"
	});

